<template>
  <div>
    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >物品配置管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">属性总览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--选择区域-->
    <div style="padding: 20px;">
      <i class="el-icon-search lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">条件查询</span>
          <span style="margin-left:45%;">属性名称：</span>
          <el-input
            style="width: 280px;margin-top: -8px;"
            placeholder="请输入属性名称"
            v-model="find.attributeName"
            clearable>
          </el-input>
        <el-button @click="findAttrPage()" size="medium" style="border-radius: 0%;background-color: #666666;margin-left: 5%;" type="info">查询</el-button>
        <el-button @click="clearFind" size="medium" style="border-radius: 0%;background-color: #666666;margin-left: 2%;" type="info">清空</el-button>
      </div>
    </div>
    <!--数据区域-->
    <div style="padding: 20px;padding-top: 0px;">
      <i class="el-icon-s-grid lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">数据列表</span>
       <el-button size="small" @click="updateAttrWindow" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
        type="info">修改</el-button>
        <el-button size="small" @click="isShow=true" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
        type="info" >新增</el-button>
      </div>
      <div>
        <el-table
          :data="allInfo.records"
          :row-style="{height:'46px'}"
          @selection-change="select"
          border
          :header-cell-style="tableHeader"
          :cell-style="{borderColor:'#CCCCCC',margin:'0',padding:'0'}"
          style="width: 100%;font-size: 18px;border: #CCCCCC solid 1px;">
          <el-table-column
            align="center"
            type="selection"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="attributeOrder"
            label="编号"
            width="180px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="attributeName"
            label="属性名称"
            width="240px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="attributeTypeName"
            label="属性值类别"
            width="180px">
          </el-table-column>
          <el-table-column
            align="center"
            label="录入方式"
            width="200px">
            <template slot-scope="scope">
              {{scope.row.attributeType==0?"手动填写":"列表选择"}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="可选值列表"
            prop="choiceList">
          </el-table-column>
        </el-table>
      </div>
        <!--分页-->
      <div style="background-color: #D7D7D7;height: 98px;width: 100%;">
        <el-pagination
        class="rf"
        style="margin-right: 2%;margin-top: 40px;"
          @current-change="handleCurrentChange"
          :current-page.sync="allInfo.current"
          :page-size="13"
          layout="prev, pager, next, jumper"
          :total="allInfo.total">
        </el-pagination>
      </div>
    </div>


    <!--新增属性-->
    <el-dialog :visible.sync="isShow" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i @click="add={},isShow=false" class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">新增属性</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--属性信息-->
      <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
        <div>
          <span style="margin-left:12%;">属性名称 </span>
          <el-input
            style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
            placeholder="请输入名称"
            v-model="add.attributeName"
            clearable>
          </el-input>
        </div>
        <div style="margin-bottom: 40px;">
          <span style="margin-left:10%;margin-right: 2%;">属性值类型 </span>
          <el-radio v-model="add.attributeType" :key="1" :label="1">单选</el-radio>
          <el-radio v-model="add.attributeType" :key="2" :label="2">多选</el-radio>
          <el-radio v-model="add.attributeType" :key="0" :label="0">自定义</el-radio>
        </div>
        <div>
          <span style="margin-left:10%;">可选值列表 </span>
          <el-button style="color: white;margin-left: 2%;;width: 60px;font-size: 30px;padding:3px;border-radius: 0%;background-color: #666666;margin-right: 1%;" @click="addInput">+</el-button>
          <div
            v-for="(item, index) in add.list"
            :key="index">
            <el-input
              style="margin-left: 23.2%;width: 350px;margin-top: 20px;"
              placeholder="请输入可选值"
              v-model="add.list[index]"
              @change="change">
              <el-button
                slot="append"
                icon="el-icon-delete"
                @click="deletePoint(index)">
              </el-button>
            </el-input>
          </div>
        </div>
      </div>
      <div style="background-color: #D7D7D7;height: 105px;width: 100%;">
        <el-button
        @click="add={},add.list=[],isShow=false"
        style="color: white;margin-top: 30px;margin-left: 35%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>取消</el-button>
        <el-button
        @click="addAttrInfo"
        style="color: white;margin-top: 30px;margin-left: 5%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>保存</el-button>
      </div>
    </el-dialog>

    <!--修改属性组-->
    <el-dialog :visible.sync="isShow2" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i @click="update={},isShow2=false" class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">修改属性</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
        <div>
          <span style="margin-left:12%;">属性名称 </span>
          <el-input
            style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
            placeholder="请输入名称"
            v-model="update.attributeName"
            clearable>
          </el-input>
        </div>
        <div style="margin-bottom: 40px;">
          <span style="margin-left:10%;margin-right: 2%;">属性值类型 </span>
          <el-radio v-model="update.attributeType" :key="1" :label="1">单选</el-radio>
          <el-radio v-model="update.attributeType" :key="2" :label="2">多选</el-radio>
          <el-radio v-model="update.attributeType" :key="0" :label="0">自定义</el-radio>
        </div>
        <div>
          <span style="margin-left:10%;">可选值列表 </span>
          <el-button style="color: white;margin-left: 2%;;width: 60px;font-size: 30px;padding:3px;border-radius: 0%;background-color: #666666;margin-right: 1%;" @click="updateAddInput">+</el-button>
          <div
            v-for="(item, index) in update.choices"
            :key="index">
            <el-input
              style="margin-left: 23.2%;width: 350px;margin-top: 20px;"
              placeholder="请输入可选值"
              v-model="update.choices[index]"
              @change="change">
              <el-button
                slot="append"
                icon="el-icon-delete"
                @click="updateDeletePoint(index)">
              </el-button>
            </el-input>
          </div>
        </div>
      </div>
      <div style="background-color: #D7D7D7;height: 105px;width: 100%;">
        <el-button
        @click="update={},isShow2=false"
        style="color: white;margin-top: 30px;margin-left: 35%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>取消</el-button>
        <el-button
        @click="updateAttrInfo"
        style="color: white;margin-top: 30px;margin-left: 5%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"AttrInfoVew",
    data(){
      return{
        //条件查询鉴定记录对象
        find:{
          pageNum:1,
          pageSize:13
        },
        //新增属性对象
        add:{
          list:[]
        },
        //修改属性对象
        update:{
          choices:[]
        },
        //属性分页对象
        allInfo:{},
        //是否新增窗口
        isShow:false,
        //是否修改窗口
        isShow2:false,
        //选中属性组集合
        selection:[],
      }
    },
    methods:{

      addAttrInfo(){
       this.$http.post("/goods/attributeInfo/addAttrInfo",this.add).then(resp=>{
         if(resp.data.code==200){
         this.$message({
                     message: '新增属性成功',
                     type: 'success'
                   });
          this.findAttrPage()
          this.add={}
         }else{
            this.$message.error(resp.data.message);
         }
         this.isShow=false
       })
      },
      updateAddInput(){
       this.update.choices.push("")
      },
      addInput () {
        console.log(222)
        console.log(this.add)
        this.add.list.push("")
        console.log(this.add)
      },
      deletePoint (index) {
        console.log(333)
        this.add.list.splice(index, 1)
      },
      updateDeletePoint(index){
        this.update.choices.splice(index, 1)
      },
      change(){
        console.log(111)
        console.log(this.add)
      },
      /**
       * 修改属性
       */
      updateAttrInfo(){
        this.$http.post("/goods/attributeInfo/updateAttrInfo",this.update).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: "修改成功",
              showClose: true,
              type: 'success'
            });
            this.isShow2 = false
            this.update={}
            this.update.choices=[]
            this.findAttrPage()
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }
        })
      },
      /**
       * 展示修改属性窗口
       */
      updateAttrWindow(){
        if(this.selection.length>1){
          this.$message({
            message: "一次只能选择一个属性组进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.selection.length<1){
          this.$message({
            message: "请选择一个属性组进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else{
          let j = JSON.stringify(this.selection[0]);
          this.update=JSON.parse(j)
          this.update.list = this.update.choices
          this.isShow2 = true
        }
      },
      /**
       * @param {Object} selection 选中集合
       */
      select(selection){
        this.selection = selection
      },
      /**
       * 保存属性组
       */
      addAttrGroup(){
        this.$http.post("/goods/attributeGroup/addAttrGroup",this.add).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: "新增成功",
              showClose: true,
              type: 'success'
            });
            this.isShow = false
            this.findAttrPage()
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }
        })
      },
      /**
       * 变化页码
       * @param {Object} val 新的页码
       */
      handleCurrentChange(val) {
        this.find.pageNum = val
        this.findAttrPage()
      },
      /**
       * 分页条件查询所有属性
       */
      findAttrPage(){
        this.$http.post("/goods/attributeInfo/findAttrPage",this.find).then(resp=>{
          this.allInfo = resp.data.data
        })
      },
      /**
       * 表格表头样式
       */
      tableHeader({ row, column, rowIndex, columnIndex }){
        if (rowIndex === 0) {
          return 'background-color: #D7D7D7;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#CCCCCC;'
        }
      },
      /**
       * 清空选择对象
       */
      clearFind(){
        let num = this.find.pageNum
        let size = this.find.pageSize
        this.find = {}
        this.find.pageNum = num
        this.find.pageSize = size
        this.findAttrPage()
      },
    },
    activated(){
      this.findAttrPage()
    }
  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .cl::after{
    content: '';
    display: block;
    clear: both;
  }
  .lf{
  	float: left;
  }
  .rf{
  	float: right;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding: 0;
  }
  .el-button--small{
    font-size: 14px;
    width: 70px;
    height: 30px;
  }
  .el-transfer-panel{
    width: 300px;
    margin-top: 50px;
  }
  .el-radio__label{
    font-size: 18px;
  }
</style>
